/*
 * @Author: yangzonglong
 * @Date: 2021-05-07 10:07:32
 * @version: v1.0.0
 * @Descripttion: 
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-14 16:11:02
 * @Auditor: 
 */
import React, { useState, useCallback, useMemo } from 'react';
import { Input } from 'antd';
import { UserAddOutlined } from '@ant-design/icons';
import User from './../../user/User';
import userInfoProps from './../../../interface/userInfo';
import { setExtra } from './../util';
interface IProps {
  value: string;
  onChange(value: string, id: string, rows?: userInfoProps[]): void;
  id: string;
  rowSelectionType?: 'radio' | 'checkbox';
  disabled?: boolean;
  extraInitialValue?: any; // 初始选中列表
  title?: string;
  hideColumns?: string[];
  dfPageSizeOptions?: string[];
  placeholder?: string;
}

export default ({ value, rowSelectionType, onChange, id, disabled, extraInitialValue, title, placeholder, hideColumns, dfPageSizeOptions }: IProps) => {

  const [visible, setVisible] = useState(false);

  const onCancel = useCallback(() => setVisible(false), []);
  const onShow = useCallback(() => setVisible(true), []);

  const onOk = useCallback((rows: userInfoProps[]) => {
    setVisible(false);
    setExtra({ ['_' + id]: rows });
    onChange(rows.map(item => item.name).join(','), id, rows);
  }, [onChange, id]);

  const defaultSelectedUsers = useMemo(() => {
    if (!extraInitialValue) return [];
    return Array.isArray(extraInitialValue) ? extraInitialValue : [];
  }, [extraInitialValue]);

  return (
    <>
      <Input placeholder={placeholder} onClick={onShow} disabled={disabled} readOnly value={value} suffix={<UserAddOutlined onClick={onShow} />} />
      <User defaultSelectedUsers={defaultSelectedUsers} rowSelectionType={rowSelectionType}
        visible={visible} onCancel={onCancel} onOk={onOk} title={title} hideColumns={hideColumns} dfPageSizeOptions={dfPageSizeOptions} />
    </>
  );
};